<template>
  <div class="my-card">
    <div class="toolbar">
      <DatePicker
        :options="options"
        :getData="getData"
        :defaultDate="defaultDate"
      >
      </DatePicker>
      <el-button class="my-btn" type="primary" @click="setGaugeOptions">水泵参数</el-button>
    </div>
    <v-chart class="chartBox" :options="lineOption"/>
    <el-container style="display:flex;flex-direction:column;">
        <el-table
          :data="openStatus"
          style="width: 100%"
          :default-sort = "{prop: 'date', order: 'descending'}"
          >
          <el-table-column
            prop="time"
            label="时间"
            sortable
            width="180">
          </el-table-column>
          <el-table-column
            prop="isOpen"
            label="开启状态"
            sortable>
            <template slot-scope="scope">
              <span>{{ scope.row.isOpen ? '开' : '关' }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-container>
      <el-dialog :visible.sync="dialogVisible" :append-to-body="true" title="水泵参数">
        <el-row>
          <el-col :span="6"><div class="grid-content bg-purple">水泵名称</div></el-col>
          <el-col :span="18"><div class="grid-content bg-purple-light">{{waterParams.name}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content bg-purple">额定流量</div></el-col>
          <el-col :span="18"><div class="grid-content bg-purple-light">{{waterParams.ratedFlow}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content bg-purple">额定扬程</div></el-col>
          <el-col :span="18"><div class="grid-content bg-purple-light">{{waterParams.ratedHead}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content bg-purple">转速</div></el-col>
          <el-col :span="18"><div class="grid-content bg-purple-light">{{waterParams.rotateSpeed}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content bg-purple">效率</div></el-col>
          <el-col :span="18"><div class="grid-content bg-purple-light">{{waterParams.effRate}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content bg-purple">当前状态</div></el-col>
          <el-col :span="18">
            <div class="grid-content bg-purple-light">
              <el-switch
              style="margin: 0"
              v-model="waterParams.isOpen"
              disabled>
              </el-switch>
              <!-- <span>{{waterParams.isOpen ? '开' : '关'}}</span> -->
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content bg-purple">当前时间</div></el-col>
          <el-col :span="18"><div class="grid-content bg-purple-light">{{today}}</div></el-col>
        </el-row>
      </el-dialog>
  </div>
</template>

<script>
import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/gauge'
import echartsCommonOptions from '../../../config/echartsCommonOptions'
import { defaultsDeep } from 'lodash'
import moment from 'moment'
import axios from 'axios'
import DatePicker from '../../../components/DatePicker.vue'
import { getWaterPumpData, getWaterPumpParams } from '../../model'

export default {
  data () {
    return {
      waterPumpId: '2',
      defaultDate: [moment().subtract(1, 'M').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
      openStatus: [],
      waterParams: {
        waterPumpId: 3421,
        name: '三坪水厂1#泵',
        ratedFlow: 100,
        ratedHead: 100,
        rotateSpeed: 120,
        effRate: '80%',
        isOpen: true
      },
      today: moment().format('YYYY-MM-DD'),
      options: [{
        text: '最近一月',
        range: [moment().subtract(1, 'M').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
      }, {
        text: '最近一年',
        range: [moment().subtract(1, 'y').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
      }],
      valueId: '',
      dialogVisible: false,
      tableData: [],
      lineOption: {},
      gaugeOption: {},
      tapOpenDegree: ''
    }
  },
  components: {
    'v-chart': ECharts,
    DatePicker
  },
  mounted () {
    this.getData(this.defaultDate)
  },
  methods: {
    initEchart () {
      this.lineOption = defaultsDeep({
        dataset: [{
          source: this.openStatus,
          dimensions: ['isOpen', 'time']
        }],
        tooltip: {
          formatter: (params, ticket, callback) => {
            const result = params
              .map(({ marker, seriesName, data }, index) => {
                return `${marker} ${seriesName} ${data.isOpen ? '开' : '关'} `
              })
              .join('<br>')
            return `${result}`
          }
        },
        yAxis: {
          name: '历史状态',
          type: 'category',
          axisLabel: {
            formatter (value) {
              if (value) return '开'
              else return '关'
            }
          }
        },
        series: [
          {
            name: '阀门状态',
            type: 'line',
            step: 'start',
            encode: {
              x: 'time',
              y: 'isOpen'
            },
            markPoint: {
              symbolSize: 40
            }
          }
        ]
      }, echartsCommonOptions.lineOptions)
    },
    getData (date) {
      let params = {
        waterPumpId: this.waterPumpId,
        startTime: moment(date[0]).format('x'),
        endTime: moment(date[1]).format('x')
      }
      getWaterPumpData(params).then(res => {
        this.openStatus = res.data.data.historyData
        this.initEchart()
      })
    },
    setGaugeOptions () {
      let params = {
        waterPumpId: this.waterPumpId
      }
      getWaterPumpParams(params).then((res) => {
        this.waterParams = res.data.data
        this.dialogVisible = true
      })
    },
    saveTapOpenDegree () {
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="sass" scoped>
// /deep/ .el-dialog__body
//   text-align: center;
.my-card
  width: 100%;
  background-color: #fff;
  padding: 15px;
  margin: 10px;
  overflow: scroll;
  .gauge-chart
    width: 300px;
    height: 200px;
  .toolbar
    position: relative;
    .my-btn
      position: absolute;
      top: 0;
      right: 0;
      margin: 0 10px;
  .grid-content
    // text-align: left;
  .dialogform
    padding: 16px
  .chartBox
    height: 350px;
    width: 100%;
  /deep/ .el-date-editor
    width: 350px;
    justify-content: space-between;
</style>
